<%= render "shared/error_messages", resource: business %>

<div class="flex flex-col space-y-6">
  <% unless turbo_native_app? %>
    <h1 class="text-3xl font-bold leading-tight text-gray-900 mx-4 lg:mx-0 mt-8 lg:mt-16">
      <%= t(".your_business_profile") %>
    </h1>
  <% end %>

  <%= form_with model: business do |form| %>
    <div class="bg-white shadow px-4 py-5 lg:rounded-lg sm:p-6">
      <div class="md:grid md:grid-cols-3 md:gap-6">
        <div class="md:col-span-1">
          <h3 class="text-lg font-medium leading-6 text-gray-900"><%= t(".business.title") %></h3>
          <p class="mt-1 text-sm text-gray-500"><%= t(".business.help") %></p>
        </div>

        <div class="mt-5 md:mt-0 md:col-span-2">
          <div class="space-y-6">
            <div class="sm:col-span-6">
              <%= form.label :company, class: "block text-sm font-medium text-gray-700" %>
              <div class="mt-1">
                <%= form.text_field :company, class: field_classes(form, :company) %>
              </div>
            </div>

            <div class="sm:col-span-3">
              <%= form.label :website, class: "block text-sm font-medium text-gray-700" %>
              <div class="mt-1 flex rounded-md shadow-sm">
                <span class="inline-flex items-center px-3 rounded-l-md border border-r-0 border-gray-300 bg-gray-50 text-gray-500 sm:text-sm">
                  https://
                </span>
                <%= form.text_field :website, class: "flex-1 focus:ring-gray-500 focus:border-gray-500 block w-full min-w-0 rounded-none rounded-r-md sm:text-sm border-gray-300" %>
              </div>
            </div>

            <div class="sm:col-span-6">
              <%= form.label :bio, class: "block text-sm font-medium text-gray-700" %>
              <div class="mt-1">
                <%= form.text_area :bio, rows: 3, class: field_classes(form, :bio) %>
              </div>
            </div>

            <div class="sm:col-span-6" data-controller="file-upload" data-file-upload-visibility-class="hidden" data-file-upload-loading-class="opacity-50">
              <span class="block text-sm font-medium text-gray-700"><%= t(".avatar") %></span>
              <div class="mt-1 flex items-center">
                <div class="relative">
                  <%= render AvatarComponent.new(avatarable: business, variant: :medium, data: {"file-upload-target": "image"}) %>
                  <div data-file-upload-target="activity" class="hidden absolute left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2">
                    <%= inline_svg_tag "icons/outline/refresh.svg", class: "w-8 h-8 text-gray-900 animate-reverse-spin", title: t(".loading") %>
                  </div>
                </div>
                <%= form.hidden_field :avatar, value: form.object.avatar.signed_id, id: "business_avatar_hidden" if form.object.avatar.attached? %>
                <%= form.file_field :avatar, direct_upload: true, accept: "image/png, image/jpg, image/jpeg", data: {action: "file-upload#select direct-upload:initialize->file-upload#start direct-upload:error->file-upload#error"}, class: "hidden" %>
                <%= form.label :avatar, t(".change_avatar"), class: "cursor-pointer ml-5 bg-white py-2 px-3 border border-gray-300 rounded-md shadow-sm text-sm leading-4 font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500" %>
              </div>
              <div data-file-upload-target="error" class="hidden bg-red-50 border-l-4 border-red-400 p-4 mt-4">
                <div class="ml-3">
                  <p class="text-sm text-red-700"><%= t(".something_went_wrong") %></p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="bg-white shadow mt-8 px-4 py-5 lg:rounded-lg sm:p-6">
      <div class="md:grid md:grid-cols-3 md:gap-6">
        <div class="md:col-span-1">
          <h3 class="text-lg font-medium leading-6 text-gray-900"><%= t(".personal.title") %></h3>
          <p class="mt-1 text-sm text-gray-500"><%= t(".personal.help") %></p>
        </div>

        <div class="mt-5 md:mt-0 md:col-span-2">
          <div class="space-y-6">
            <div class="sm:col-span-3">
              <%= form.label :contact_name, class: "block text-sm font-medium text-gray-700" %>
              <div class="mt-1">
                <%= form.text_field :contact_name, autocomplete: "name", class: field_classes(form, :name) %>
              </div>
            </div>

            <div class="sm:col-span-3">
              <%= form.label :contact_role, class: "block text-sm font-medium text-gray-700" %>
              <div class="mt-1">
                <%= form.text_field :contact_role, class: field_classes(form, :contact_role) %>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="bg-white shadow mt-8 px-4 py-5 lg:rounded-lg sm:p-6">
      <div class="md:grid md:grid-cols-3 md:gap-6">
        <div class="md:col-span-1">
          <h3 id="notifications" class="text-lg font-medium leading-6 text-gray-900"><%= t(".notifications.title") %></h3>
        </div>

        <div class="mt-5 md:mt-0 md:col-span-2 divide-y divide-gray-200 space-y-6">
          <div>
            <%= form.label t(".developer_notifications.legend"), class: "text-base font-medium text-gray-900" %>
            <p class="text-sm leading-5 text-gray-500"><%= t(".developer_notifications.help_text") %></p>
            <div class="mt-4">
              <%= render Businesses::UpgradeAccountComponent.new(current_user) do %>
                <fieldset>
                  <legend class="sr-only"><%= t(".developer_notifications.legend") %></legend>
                  <div class="space-y-4">
                    <% Business.developer_notifications.keys.each do |value| %>
                      <div class="flex items-center">
                        <%= form.radio_button :developer_notifications, value, class: "focus:ring-gray-500 h-4 w-4 text-gray-600 border-gray-300" %>
                        <%= form.label :developer_notifications, t(".developer_notifications.values.#{value}"), value: value, class: "ml-3 block text-sm font-medium text-gray-700" %>
                      </div>
                    <% end %>
                  </div>
                </fieldset>
              <% end %>
            </div>
          </div>

          <div class="pt-6">
            <fieldset>
              <div class="space-y-4">
                <div class="flex items-start">
                  <div class="h-5 flex items-center">
                    <%= form.check_box :survey_request_notifications, class: "focus:ring-gray-500 h-4 w-4 text-gray-600 border-gray-300 rounded" %>
                  </div>
                  <div class="ml-3 text-sm">
                    <%= form.label :survey_request_notifications, t(".survey_request_notifications.legend"), class: "font-medium text-gray-700" %>
                    <p class="text-gray-500"><%= t(".survey_request_notifications.help_text") %></p>
                  </div>
                </div>
              </div>
            </fieldset>
          </div>
        </div>
      </div>
    </div>

    <div class="flex justify-end mt-8 mb-16 mr-4 sm:mr-6 lg:mr-0">
      <%= render SubmitButtonComponent.new(disable_with: business.persisted? ? t(".updating") : t(".creating"), button_classes: "ml-3") %>
    </div>
  <% end %>
</div>
